<template>  
  <div class="app-container">    
    <!-- 查询条件 -->    
    <el-form      
      :model="queryParams"      
      ref="queryRef"      
      :inline="true"      
      label-width="88px"    
    >      
      <el-form-item label="姓名" prop="empName">        
        <el-input          
          v-model="queryParams.empName"          
          placeholder="请输入姓名"          
          clearable          
          style="width: 200px"         
          @keyup.enter.native="handleQuery"        
        />      
      </el-form-item>      
      
      <el-form-item label="持枪证号" prop="gunLicenceNum">        
        <el-input          
          v-model="queryParams.gunLicenceNum"          
          placeholder="请输入持枪证号"          
          clearable         
          style="width: 260px"          
          @keyup.enter.native="handleQuery"        
        />      
      </el-form-item>      
      
      <el-form-item>        
        <el-button type="primary" icon="Search" @click="handleQuery">          
          查询        
        </el-button>        
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>      
      </el-form-item>    
    </el-form>   
    
    <!-- 标题 -->    
    <h2 style="text-align: center; margin: 10px 0 5px;">
      离职人员持枪证统计表    
    </h2>    
    
    <!-- 工具栏 -->    
    <div style="margin-bottom: 10px;">      
      <el-button type="warning" icon="Download" @click="handleExport">        
        导出      
      </el-button>    
    </div>    
    
    <!-- 列表 -->    
    <el-table      
      v-loading="loading"     
      :data="list"      
      border      
      @selection-change="handleSelectionChange"   
    >      
      <el-table-column type="selection" width="55" align="center" />
      
      <el-table-column label="工号" prop="empNo" width="120" />      
      
      <el-table-column label="姓名" prop="empName" width="120" />      
      
      <el-table-column label="持枪证号" prop="gunLicenceNum" width="180" />
      
      <el-table-column label="身份证号" prop="idno" width="180" />      
      
      <el-table-column label="证件有效期" prop="gunLicenceValidity" width="140">
        <template #default="scope">          
          <span>            
            {{ parseTime(scope.row.gunLicenceValidity, "{y}-{m}-{d}") }}          
          </span>        
        </template>      
      </el-table-column>      
      
      <el-table-column label="备注" prop="remark" min-width="260" show-overflow-tooltip />    
    </el-table>    
    
    <pagination      
      v-show="total > 0"      
      :total="total"      
      v-model:page="queryParams.pageNum"      
      v-model:limit="queryParams.pageSize"      
      @pagination="getList"    
    />  
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from "vue"
import { parseTime } from "@/utils/ruoyi"
import { listQuitLicence } from "@/api/service/licence"

const { proxy } = getCurrentInstance()

const loading = ref(false);
const list = ref([]);
const total = ref(0);
const ids = ref([]);

const queryParams = reactive({  
  pageNum: 1,  
  pageSize: 10,  
  empName: undefined,  
  gunLicenceNum: undefined,
});

function getList() {
  loading.value = true  
  listQuitLicence(queryParams)    
    .then((res) => {      
      list.value = res.rows || []      
      total.value = res.total || 0      
      loading.value = false    
    })    
    .catch(() => {      
      loading.value = false    
    })
    
  }
  
  function handleQuery() {  
    queryParams.pageNum = 1  
    getList()
    }
    
    function resetQuery() {
      proxy.resetForm("queryRef")  
      handleQuery()
    }
    
    function handleSelectionChange(selection) {
      ids.value = selection.map((item) => item.id)
    }
    
    // 导出
    function handleExport() {  
      proxy.download(    
        "/service/gunLicence/quit/export",    
        { ...queryParams, ids: ids.value.join(",") },    
        `离职人员持枪证统计_${new Date().getTime()}.xlsx`  
      )
    }
    
    onMounted(() => {  
      getList()
    })
</script>